﻿@page "/components/daterangepicker"
@page "/components/date-range-picker"
@using Bit.BlazorUI.Demo.Client.Core.Helpers

<PageOutlet Url="components/daterangepicker"
            Title="DateRangePicker"
            Description="daterangepicker component of the bit BlazorUI components" />

<DemoPage Name="DateRangePicker"
          Description="A BitDateRangePicker offers a drop-down control that’s optimized for picking two dates from a calendar view where contextual information like the day of the week or fullness of the calendar is important. You can modify the calendar to provide additional context or to limit available dates."
          Parameters="componentParameters"
          SubClasses="componentSubClasses"
          SubEnums="componentSubEnums"
          GitHubUrl="Inputs/DateRangePicker/BitDateRangePicker.razor"
          GitHubDemoUrl="Inputs/DateRangePicker/BitDateRangePickerDemo.razor">
    <DemoExample Title="Basic" RazorCode="@example1RazorCode" CsharpCode="@example1CsharpCode" Id="example1">
        <div>Explore basic configurations of the BitDateRangePicker, including labels, placeholders, week numbers and highlighting features.</div>
        <br />
        <div class="example-content">
            <BitDateRangePicker Label="Basic DateRangePicker" />
            <br /><br />
            <BitDateRangePicker Label="Disabled" IsEnabled="false" />
            <br /><br />
            <BitDateRangePicker Label="Required" Required />
            <br /><br />
            <BitDateRangePicker Label="PlaceHolder" Placeholder="Select a date range" />
            <br /><br />
            <BitDateRangePicker Label="Week numbers" ShowWeekNumbers />
            <br /><br />
            <BitDateRangePicker Label="Highlight months" HighlightCurrentMonth HighlightSelectedMonth />
            <br /><br />
            <BitDateRangePicker Label="TimePicker" ShowTimePicker />
            <br /><br />
            <BitDateRangePicker Label="Custom Icon" IconName="@BitIconName.Airplane" />
            <br /><br />
            <BitDateRangePicker Label="Disabled AutoClose" AutoClose="false" />
            <br /><br />
            <BitDateRangePicker Label="Show clear button when has a value" ShowClearButton />
            <br /><br />
            <div style="font-weight:600;padding:4px 0;font-size:14px;color:var(--bit-clr-fg-pri);">
                <div>StartingValue: December 2020</div>
                <div>Start Time: 10:12</div>
                <div>End Time: 16:59</div>
            </div>
            <BitDateRangePicker ShowTimePicker StartingValue="startingValue" />
        </div>
    </DemoExample>

    <DemoExample Title="Min & Max" RazorCode="@example2RazorCode" Id="example2">
        <div>Set minimum and maximum selectable dates to restrict user input to a specific range of days, months, or years.</div>
        <br /><br />
        <div class="example-content">
            <div>Min: Now.AddDays(-5)</div>
            <div>Max: Now.AddDays(+5)</div>
            <BitDateRangePicker MinDate="DateTimeOffset.Now.AddDays(-5)" MaxDate="DateTimeOffset.Now.AddDays(5)" />
            <br /><br />
            <div>Min: Now.AddMonths(-2)</div>
            <div>Max: Now.AddMonths(+1)</div>
            <BitDateRangePicker MinDate="DateTimeOffset.Now.AddMonths(-2)" MaxDate="DateTimeOffset.Now.AddMonths(1)" />
            <br /><br />
            <div>Min: Now.AddYears(-5)</div>
            <div>Max: Now.AddYears(+1)</div>
            <BitDateRangePicker MinDate="DateTimeOffset.Now.AddYears(-5)" MaxDate="DateTimeOffset.Now.AddYears(1)" />
            <br /><br />
            <div>MaxRange: 2 days, 4 hours and 30 minutes</div>
            <BitDateRangePicker MaxRange="new TimeSpan(2, 4, 30, 0)" ShowTimePicker />
        </div>
    </DemoExample>

    <DemoExample Title="Hour/Minute step" RazorCode="@example3RazorCode" Id="example3">
        <div>Adjust the increment step for hours and minutes when using the BitDateRangePicker's time selection feature.</div>
        <br />
        <div class="example-content">
            <BitDateRangePicker ShowTimePicker
                                Label="HourStep = 2"
                                HourStep="2" />
            <br />
            <BitDateRangePicker ShowTimePicker
                                Label="MinuteStep = 15"
                                MinuteStep="15" />
        </div>
    </DemoExample>

    <DemoExample Title="Formatting" RazorCode="@example4RazorCode" Id="example4">
        <div class="example-desc">
            Applications can customize how dates are formatted and parsed. Formatted dates can be ambiguous, so the control will avoid parsing the formatted strings of dates selected using the UI when text input is allowed.
            In this example, we are formatting and parsing dates as dd=MM(yy).
        </div>
        <div class="example-content">
            <BitDateRangePicker Label="DateFormat: 'dd=MM(yy)'" DateFormat="dd=MM(yy)" />
            <br /><br />
            <BitDateRangePicker Label="ValueFormat: 'Dep: {0}, Arr: {1}'" ValueFormat="Dep: {0}, Arr: {1}" />
        </div>
    </DemoExample>

    <DemoExample Title="Binding" RazorCode="@example5RazorCode" CsharpCode="@example5CsharpCode" Id="example5">
        <div>Bind a selected date to a model or view, allowing two-way data binding with the BitDateRangePicker.</div>
        <br />
        <div class="example-content">
            <BitDateRangePicker @bind-Value="@selectedDateRange" />
        </div>
        <br />
        <div>From: <b>@selectedDateRange?.StartDate.ToString()</b></div>
        <div>To: <b>@selectedDateRange?.EndDate.ToString()</b></div>
    </DemoExample>

    <DemoExample Title="Culture" RazorCode="@example6RazorCode" Id="example6">
        <div class="example-desc">
            By default, BitDateRangePicker picks the current culture.
            But you can provide your own instance of CultureInfo for any custom culture.
            <br />
            You also can use our
            <BitLink Href="https://github.com/bitfoundation/bitplatform/blob/develop/src/BlazorUI/Demo/Client/Bit.BlazorUI.Demo.Client.Core/Helpers/CultureInfoHelper.cs" Target="_blank">
                CultureInfoHelper
            </BitLink> class or check its code to see how to create a custom culture.
        </div>
        <br />
        <div class="example-content">
            <BitDateRangePicker Label="fa-IR culture with Farsi names"
                                GoToTodayTitle="برو به امروز"
                                ValueFormat="شروع: {0}, پایان: {1}"
                                Culture="CultureInfoHelper.GetFaIrCultureWithFarsiNames()" />
            <br /><br />
            <BitDateRangePicker Label="fa-IR culture with Fingilish names"
                                GoToTodayTitle="Boro be emrouz"
                                ValueFormat="Shoro: {0}, Payan: {1}"
                                Culture="CultureInfoHelper.GetFaIrCultureWithFingilishNames()" />
        </div>
    </DemoExample>

    <DemoExample Title="TimeZone" RazorCode="@example7RazorCode" CsharpCode="@example7CsharpCode" Id="example7">
        <div>
            Specifies the timezone used to interpret and display the selected date/time.
            <br />
            Remeber using this feature in different runtimes needs more investigations, for example,
            there are different data available based on the OS the code is running on or different settings
            enabled for the project (like InvariantTimezone in the project file,
            <BitLink Href="https://learn.microsoft.com/en-us/aspnet/core/blazor/globalization-localization?view=aspnetcore-9.0#timezone-information"
                     Target="_blank">more info</BitLink>).
        </div>
        <br /><br />
        <div>Defalt (local TimeZone):</div><br/>
        <div class="example-content">
            <BitDateRangePicker @bind-Value="@timeZoneDateRange1" ShowTimePicker />
        </div>
        <br />
        <div>Selected date range: from @(timeZoneDateRange1?.StartDate?.ToString() ?? "-") to @(timeZoneDateRange1?.EndDate?.ToString() ?? "-")</div>

        @{
            TimeZoneInfo? timeZoneInfo = null;
            var allTimeZones = TimeZoneInfo.GetSystemTimeZones();
            if (allTimeZones.Count > 0)
            {
                timeZoneInfo = allTimeZones[0];
            }
        }

        @if (timeZoneInfo is not null) {
            <br /><br /><br /><br />
            <div>"@timeZoneInfo.Id" TimeZone:</div><br/>
            <div class="example-content">
                <BitDateRangePicker TimeZone="timeZoneInfo" @bind-Value="@timeZoneDateRange2" ShowTimePicker />
            </div>
            <br />
            <div>Selected date range: from @(timeZoneDateRange2?.StartDate?.ToString() ?? "-") to @(timeZoneDateRange2?.EndDate?.ToString() ?? "-")</div>
        }
    </DemoExample>

    <DemoExample Title="Standalone" RazorCode="@example8RazorCode" Id="example8">
        <div>Use the BitDateRangePicker in a standalone mode, allowing it to function independently without a surrounding form or container.</div>
        <br />
        <div class="example-content-standalone">
            <BitDateRangePicker Label="Basic DatePicker" Standalone />
            <br /><br />
            <BitDateRangePicker Label="Disabled" IsEnabled="false" Standalone />
            <br /><br />
            <BitDateRangePicker Label="Week numbers" ShowWeekNumbers Standalone />
            <br /><br />
            <BitDateRangePicker Label="Highlight months" HighlightCurrentMonth HighlightSelectedMonth Standalone />
            <br /><br />
            <BitDateRangePicker Label="TimePicker" ShowTimePicker Standalone />
        </div>
    </DemoExample>

    <DemoExample Title="ReadOnly" RazorCode="@example9RazorCode" CsharpCode="@example9CsharpCode" Id="example9">
        <div>The ReadOnly parameter makes the date range picker input non-editable, preventing users from manually changing the time value.</div>
        <br />
        <div class="example-content">
            <BitDateRangePicker Label="Basic" ReadOnly @bind-Value="readOnlyDateRange" />
            <br /><br />
            <BitDateRangePicker Label="Text input allowed" ReadOnly AllowTextInput @bind-Value="readOnlyDateRange" />
        </div>
        <br /><br />
        <div class="example-content-standalone">
            <BitDateRangePicker Label="Standalone" ReadOnly Standalone @bind-Value="readOnlyDateRange" />
            <br /><br />
            <BitDateRangePicker Label="Standalone with TimePicker" ReadOnly ShowTimePicker Standalone @bind-Value="readOnlyDateRange" />
        </div>
    </DemoExample>

    <DemoExample Title="Templates" RazorCode="@example10RazorCode" CsharpCode="@example10CsharpCode" Id="example10">
        <div>Utilize various templates within the BitDateRangePicker, such as custom label templates, day cell templates, and year cell templates.</div>
        <br />
        <div class="example-content">
            <BitDateRangePicker>
                <LabelTemplate>
                    Custom label <BitIcon IconName="@BitIconName.Calendar" />
                </LabelTemplate>
            </BitDateRangePicker>
            <br /><br /><br />
            <BitDateRangePicker Label="DayCellTemplate">
                <DayCellTemplate>
                    <span class="day-cell@(context.DayOfWeek == DayOfWeek.Sunday ? " weekend-cell" : null)">
                        @context.Day

                        @if (context.Day % 5 is 0)
                        {
                            <span class="badge"></span>
                        }
                    </span>
                </DayCellTemplate>
            </BitDateRangePicker>
            <br /><br /><br />
            <BitDateRangePicker Label="MonthCellTemplate">
                <MonthCellTemplate>
                    <div style="width:28px;padding:3px;color:black;background:@(context.Month == 1 ? "lightcoral" : "yellowgreen")">
                        @culture.DateTimeFormat.GetAbbreviatedMonthName(context.Month)
                    </div>
                </MonthCellTemplate>
            </BitDateRangePicker>
            <br /><br /><br />
            <BitDateRangePicker Label="YearCellTemplate">
                <YearCellTemplate>
                    <span style="position: relative">
                        @context
                        <span class="year-suffix">AC</span>
                    </span>
                </YearCellTemplate>
            </BitDateRangePicker>
        </div>
    </DemoExample>

    <DemoExample Title="Responsive" RazorCode="@example11RazorCode" Id="example11">
        <div>Enable responsive design for the BitDateRangePicker, allowing it to adjust its layout and appearance based on the screen size.</div>
        <br />
        <div class="example-content">
            <BitDateRangePicker Label="Responsive DateRangePicker"
                                Responsive
                                ShowWeekNumbers
                                Placeholder="Select a date range" />
        </div>
    </DemoExample>

    <DemoExample Title="Style & Class" RazorCode="@example12RazorCode" CsharpCode="@example12CsharpCode" Id="example12">
        <div>Explore styling and class customization for BitDateRangePicker, including component styles, custom classes, and detailed styles.</div>
        <br /><br />
        <div>Component's Style & Class:</div>
        <br />
        <div class="example-content">
            <BitDateRangePicker Style="margin: 1rem; box-shadow: dodgerblue 0 0 1rem;" />
            <br />
            <BitDateRangePicker Class="custom-class" />
        </div>
        <br /><br /><br />
        <div><b>Styles</b> & <b>Classes</b>:</div>
        <br />
        <div class="example-content">
            <BitDateRangePicker ShowTimePicker
                                Styles="@(new() { Root = "margin-inline: 1rem;",
                                                      Focused = "--focused-background: #b2b2b25a;",
                                                      Input = "padding: 0.5rem;",
                                                      InputContainer = "background: var(--focused-background);",
                                                      Group = "border: 1px solid mediumseagreen; background: #1c73324d;",
                                                      Divider = "border-color: mediumseagreen;",
                                                      DayPickerMonth = "color: darkgreen;",
                                                      TodayDayButton = "background-color: green;",
                                                      SelectedDayButtons = "background-color: #36fa368c;",
                                                      EndTimeInputContainer = "margin-top: 0.5rem;",
                                                      StartAndEndSelectionDays = "background-color: limegreen;",
                                                      StartTimeIncreaseHourButton = "background-color: limegreen;",
                                                      StartTimeIncreaseMinuteButton = "background-color: limegreen;",
                                                      StartTimeDecreaseHourButton = "background-color: limegreen;",
                                                      StartTimeDecreaseMinuteButton = "background-color: limegreen;",
                                                      EndTimeIncreaseHourButton = "background-color: limegreen;",
                                                      EndTimeIncreaseMinuteButton = "background-color: limegreen;",
                                                      EndTimeDecreaseHourButton = "background-color: limegreen;",
                                                      EndTimeDecreaseMinuteButton = "background-color: limegreen;" })" />
            <br />
            <BitDateRangePicker @bind-Value="@classesValue"
                                Label="Select a date"
                                Classes="@(new() { Root = "custom-root",
                                                       Focused = "custom-focus",
                                                       Input = "custom-input",
                                                       InputContainer = "custom-input-container",
                                                       Label = $"custom-label{(classesValue is null ? string.Empty : " custom-label-top")}",
                                                       Callout = "custom-callout",
                                                       DayPickerWrapper = "custom-day-picker",
                                                       DayButton = "custom-day",
                                                       TodayDayButton = "custom-today-day",
                                                       StartAndEndSelectionDays = "custom-start-end",
                                                       SelectedDayButtons = "custom-selected-days",
                                                       PrevMonthNavButton = "custom-prev-month",
                                                       NextMonthNavButton = "custom-next-month",
                                                       DayPickerMonth = "custom-day-month",
                                                       DayPickerHeader = "custom-day-header",
                                                       WeekNumbersHeader = "custom-week-header",
                                                       YearMonthPickerWrapper = "custom-year-picker" })" />
        </div>
    </DemoExample>

    <DemoExample Title="RTL" RazorCode="@example13RazorCode" Id="example13">
        <div>Use BitDateRangePicker in right-to-left (RTL).</div>
        <br />
        <div dir="rtl">
            <div class="example-content">
                <BitDateRangePicker Dir="BitDir.Rtl" />
            </div>
        </div>
    </DemoExample>
</DemoPage>